<template>
  <div class="image-viewer">
    <div
      v-for="(image, index) in images"
      :key="index"
      class="image-item"
      @click="handlePreview(index)"
    >
      <ElImage
        :src="image"
        :alt="`图片 ${index + 1}`"
        fit="cover"
        lazy
      >
        <template #placeholder>
          <div class="image-slot">
            <ElIcon class="is-loading"><Loading /></ElIcon>
          </div>
        </template>
        <template #error>
          <div class="image-slot">
            <ElIcon><Picture /></ElIcon>
          </div>
        </template>
      </ElImage>
      
      <!-- 遮罩层 -->
      <div class="image-overlay">
        <ElIcon :size="32"><ZoomIn /></ElIcon>
      </div>
    </div>
    
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showViewer"
      :url-list="images"
      :initial-index="currentIndex"
      :hide-on-click-modal="true"
      @close="showViewer = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Loading, Picture, ZoomIn } from '@element-plus/icons-vue'
import { ElImageViewer } from 'element-plus'

const props = defineProps({
  images: {
    type: Array,
    required: true,
    default: () => []
  },
  // 列数
  columns: {
    type: Number,
    default: 3
  }
})

const showViewer = ref(false)
const currentIndex = ref(0)

const handlePreview = (index) => {
  currentIndex.value = index
  showViewer.value = true
}
</script>

<style lang="scss" scoped>
.image-viewer {
  display: grid;
  grid-template-columns: repeat(v-bind(columns), 1fr);
  gap: $spacing-md;
  
  @include respond-to('sm') {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @include respond-to('xs') {
    grid-template-columns: 1fr;
  }
}

.image-item {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: $radius-md;
  cursor: pointer;
  
  .el-image {
    width: 100%;
    height: 100%;
  }
  
  .image-slot {
    @include flex-center;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 32px;
  }
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  @include flex-center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  opacity: 0;
  @include transition(opacity);
  
  .image-item:hover & {
    opacity: 1;
  }
}
</style>

